$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$dark-input-border: #403e3e;
$dark-input-border-hover: #aeafb1;

$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);
$light-input-border: #00000040;
$light-input-border-hover: #1a1b1b;

$lgn-dark-brand: (
  50: #f1f7fd,
  100: #afd1f2,
  200: #7fb5ea,
  300: #4192e0,
  400: #2782dc,
  500: #2073c4,
  600: #1c64aa,
  700: #17548f,
  800: #134575,
  900: #0f355b,
  A100: #fff,
  A200: #dde6f3,
  A300: #6992c9,
  A400: #38649d,
  A500: #666,
  A600: #fff,
  A700: #8795a1,
  A800: #2d2e30,
  A900: #212224,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  ),
);

$lgn-light-brand: (
  50: #eaedfa,
  100: #ccd2f2,
  200: #aab4ea,
  300: #8796e1,
  400: #6e80da,
  500: #5469d4,
  600: #4d61cf,
  700: #4356c9,
  800: #3a4cc3,
  900: #293bb9,
  A100: #f9faff,
  A200: #c6ccff,
  A300: #939fff,
  A400: #7a88ff,
  A500: #333,
  A600: #000,
  A700: #8795a1,
  A800: white,
  A900: #fafafa,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  ),
);

$lgn-warn: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  ),
);

$lgn-grey: (
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #212121,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  ),
);

$lgn-light-theme-background: (
  background: map-get($lgn-grey, 50),
  hover: rgba(black, 0.04),
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map-get($lgn-grey, 300),
  selected-disabled-button: map-get($lgn-grey, 400),
  tooltip: map-get($lgn-grey, 700),
  input: #fafafa50,
  footer: #fafafa,
  qrcode: #fafafa,
  // use black ground on white background because inverted qrcode colors are not allowed
  account-selector-hover: rgba(black, 0.02),
  account-selector-active: rgba(black, 0.05),
  google: #ffffff,
);

$lgn-dark-theme-background: (
  background: #212224,
  hover: rgba(white, 0.04),
  // TODO(kara): check style with Material Design UX
  disabled-button: rgba(white, 0.12),
  raised-button: map-get($lgn-grey, 800),
  focused-button: $light-focused,
  selected-button: map-get($lgn-grey, 900),
  selected-disabled-button: map-get($lgn-grey, 800),
  tooltip: map-get($lgn-grey, 700),
  input: rgba(black, 0.2),
  footer: #212224,
  qrcode: white,
  // needs white background to recognize borders,
  account-selector-hover: rgba(white, 0.02),
  account-selector-active: rgba(white, 0.05),
  google: #ffffff,
);

$lgn-light-theme-foreground: (
  footer-links: map-get($lgn-light-brand, 500),
  footer-line: #e3e8ee,
  base: black,
  input-border: $light-input-border,
  radio-border: $light-input-border,
  input-border-hover: $light-input-border-hover,
  input-placeholder: map-get($lgn-grey, 600),
  label: map-get($lgn-grey, 600),
  divider: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba(black, 0.26),
  elevation: black,
  secondary-text: $dark-secondary-text,
  icon: rgba(black, 0.54),
  text: rgba(black, 0.87),
  qrcode: black,
  google-text: #8b8d8d,
);

$lgn-dark-theme-foreground: (
  footer-links: map-get($lgn-grey, 500),
  footer-line: #303131,
  base: white,
  input-border: $dark-input-border,
  radio-border: $dark-input-border,
  input-border-hover: $dark-input-border-hover,
  input-placeholder: map-get($lgn-grey, 600),
  label: map-get($lgn-grey, 600),
  divider: $light-dividers,
  disabled: $light-disabled-text,
  disabled-button: rgba(white, 0.3),
  elevation: black,
  secondary-text: $light-secondary-text,
  icon: white,
  text: white,
  qrcode: black,
  google-text: #8b8d8d,
);
